"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Eye, EyeOff, Lock, Loader } from "lucide-react";
import { useState } from "react";
import {
  ForgotVerificationFormData,
  ForgotVerificationSchema,
} from "@/schemas/auth";
import { useMutation } from "@tanstack/react-query";
import { forgotVerificationAction } from "@/actions/auth";
import Input from "@/components/custom-ui/input";
import { useRouter, useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";

export default function ForgotVerificationForm() {
  const t = useTranslations("authPages");
  const tZod = useTranslations("zod");
  const searchParams = useSearchParams();
  const token = searchParams.get("token");
  const email = searchParams.get("email");
  const [pwdShow, setPwdShow] = useState(false);
  const [confirmPwdShow, setConfirmPwdShow] = useState(false);
  const router = useRouter();
  const form = useForm<ForgotVerificationFormData>({
    resolver: zodResolver(ForgotVerificationSchema(tZod)),
    defaultValues: {
      email: email as string,
      token: token as string,
      password: "",
      confirm_password: "",
    },
  });
  const mutation = useMutation({
    mutationFn: forgotVerificationAction,
    onSuccess: (data) => {
      if (data.success) {
        toast.success(data.success);
        router.push("/auth/login");
      }
      if (data.error) {
        toast.error(data.error);
      }
    },
    onError: (error) => {
      toast.error(error.message);
    },
  });

  const { mutate, isPending } = mutation;
  const onSubmit = (values: ForgotVerificationFormData) => mutate(values);
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
        <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel className="text-muted-foreground">{t("password")}</FormLabel>
              <FormControl>
                <Input
                  className="h-12"
                  type={!pwdShow ? "password" : "text"}
                  placeholder="******"
                  autoComplete="password"
                  {...field}
                  startIcon={<div className="w-10 flex justify-center"><Lock className="h-4 w-4" /></div>}
                  endIcon={
                    <div
                      onClick={() => setPwdShow(!pwdShow)}
                      className="w-10 flex justify-center cursor-pointer"
                    >
                      {pwdShow ? (
                        <Eye className="h-4 w-4" />
                      ) : (
                        <EyeOff className="h-4 w-4" />
                      )}
                    </div>
                  }
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="confirm_password"
          render={({ field }) => (
            <FormItem>
              <FormLabel className="text-muted-foreground">
                {t("confirmPassword")}
              </FormLabel>
              <FormControl>
                <Input
                  className="h-12"
                  type={!confirmPwdShow ? "password" : "text"}
                  placeholder="******"
                  autoComplete="confirm_password"
                  {...field}
                  startIcon={<div className="w-10 flex justify-center"><Lock className="h-4 w-4" /></div>}
                  endIcon={
                    <div
                      onClick={() => setConfirmPwdShow(!confirmPwdShow)}
                      className="w-10 flex justify-center cursor-pointer"
                    >
                      {confirmPwdShow ? (
                        <Eye className="h-4 w-4" />
                      ) : (
                        <EyeOff className="h-4 w-4" />
                      )}
                    </div>
                  }
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button
          className="w-full h-12 cursor-pointer select-none"
          type="submit"
          disabled={isPending}
        >
          {isPending ? <Loader className="animate-spin" /> : null}
          {t("resetPassword")}
        </Button>
      </form>
    </Form>
  );
}
